<script setup>
/**
 * Vue3 Icon 组件 (基于iconfont)
 *
 * Props:
 *  name - 图标名称 (必需)
 *  size - 图标大小 (支持数字/字符串)
 *  color - 图标颜色
 *  spin - 是否旋转 (loading效果)
 *  rotate - 旋转角度 (0-360)
 */
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
    validator(value) {
      // 实际项目中应该检查图标名称是否有效
      return typeof value === 'string' && value.length > 0
    }
  },
  size: {
    type: [Number, String],
    default: '1em'
  },
  color: {
    type: String,
    default: 'currentColor' // 继承父级颜色
  },
  spin: Boolean,
  rotate: {
    type: Number,
    default: 0,
    validator: value => value >= 0 && value <= 360
  }
})

// 计算图标样式
const iconStyle = computed(() => {
  const styles = {
    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
    fill: props.color
  }

  if (props.rotate !== 0) {
    styles.transform = `rotate(${props.rotate}deg)`
  }

  return styles
})

// 计算图标类名
const iconClass = computed(() => ({
  'icon': true,
  'icon-spin': props.spin,
  [`icon-${props.name}`]: true
}))
</script>

<template>
  <!-- 使用阿里图标库的Symbol方案 -->
  <svg
      :class="iconClass"
      :style="iconStyle"
      aria-hidden="true"
  >
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon-spin {
  animation: icon-spin 1.5s linear infinite;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>